// .login {
//     display: flex;
//     height: 100%;
//     .left {
//         img {
//             height: 100vh;
//         }
//     }

//     .right {
//         position: relative;
//         flex: 1;
//         //background-image: linear-gradient(135deg, #ccd7e9, #eae3f5);
//         background: linear-gradient(200deg, #ffffce, #fff3f5);
//         .logo {
//             display: flex;
//             img {
//                 margin-left: 60px;
//                 margin-top: 60px;
//                 width: 50px;
//             }
//         }
//     }

//     .box {
//         position: absolute;
//         top: 0px;
//         left: 0px;
//         bottom: 0px;
//         right: 0px;
//         margin: auto;
//         width: 380px;
//         height: 430px;
//         background-color: #ffffff;
//         font-size: 18px;
//         border-radius: 30px;
//         .static {
//             cursor: pointer;
//         }

//         form {
//             display: flex;
//             flex-direction: column;
//             gap: 30px;
//             align-items: center;
//             padding: 0 30px;
//             margin-top: 30px;
//             input {
//                 height: 50px;
//                 width: 100%;
//                 text-indent: 15px;
//                 font-size: 17px;
//                 border-radius: 5px;
//                 background-color: #f9f9f9;
//                 border: none;
//             }
//             button {
//                 width: 300px;
//                 height: 50px;
//                 font-size: 20px;
//                 background-color: #ffbd9a;
//                 color: #ffffff;
//                 border-radius: 10px;
//                 border: none;
//                 cursor: pointer;
//             }
//         }
//     }

//     h1 {
//         font-size: 35px;
//         margin-top: 60px;
//         font-weight: normal;
//         a {
//             font-family: 'Microsoft YaHei';
//         }
//     }
//     .static {
//         font-size: 30px;
//         color: #c6c6c6;
//         margin-top: 30px;
//         margin-left: 50px;
//         span {
//             margin-left: 40px;
//         }
//         .active {
//             color: black;
//         }
//     }

//     .box .hide {
//         display: none;
//     }
// }

.box {
    min-width: 1040px;
    min-height: 99.9vh;
    position: relative;
    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1000px;
        padding: 0;
        z-index: 1;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        .session_body {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin: auto;
            width: inherit;
            position: relative;
            -webkit-box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 30%);
            box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 30%);
            .session_body::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                overflow: hidden;
                background: #fff;
                z-index: -1;
            }
            .session_left {
                color: #fff;
                position: relative;
                width: 50%;
                padding: 80px 80px 48px;
                background: -webkit-gradient(linear, left bottom, left top, from(#3a485a), to(#607089));
                background: linear-gradient(0deg, #3a485a 0%, #607089 100%);
                .session_left_container {
                    .session_left_header {
                        display: flex;
                        img {
                            width: 50px;
                        }
                    }
                    .session_left_content {
                        flex: 1;
                        color: #fff;
                        font-size: 14px;
                        margin-top: 46px;
                        ul li {
                            margin-top: 16px;
                            line-height: 1.71429;
                        }
                    }

                    .session_left_footer {
                        font-size: 14px;
                        padding-top: 40px;
                        margin-top: 24px;
                        border-top: 1px solid rgba(255, 255, 255, 0.2);
                    }
                }
            }
            .session_right {
                height: 100%;
                padding: 64px 70px 48px;
                position: relative;
                .static {
                    cursor: pointer;
                    color: #40485b;
                }

                form {
                    display: flex;
                    flex-direction: column;
                    gap: 30px;
                    align-items: center;
                    padding: 0 30px;
                    margin-top: 30px;
                    input {
                        height: 50px;
                        width: 100%;
                        text-indent: 15px;
                        font-size: 17px;
                        border-radius: 5px;
                        background-color: #e8f0fe;
                        border: none;
                    }
                    input:focus {
                        box-shadow: none;
                        border-color: rgba(254, 115, 0, 0.5);
                    }
                    button {
                        width: 300px;
                        height: 50px;
                        font-size: 20px;
                        background-color: #fe7300;
                        color: #ffffff;
                        border-radius: 10px;
                        border: none;
                        cursor: pointer;
                    }
                }
                .static {
                    font-size: 30px;
                    color: #c6c6c6;
                    margin-top: 30px;
                    margin-left: 50px;
                    span {
                        margin-left: 40px;
                    }
                    .active {
                        color: black;
                    }
                }

                .hide {
                    display: none;
                }
            }
        }
    }
    .box::before {
        width: 394px;
        height: 468px;
        background-image: url(../../assets/imgs/bg-left.png);
        left: 0;
    }
    .box::after {
        width: 487px;
        height: 412px;
        background-image: url(../../assets/imgs/bg-right.png);
        right: 0;
    }
}
